<template>
  <div class="login">
    <div class="form">
      <div class="top">
        <h3>移动端管理系统</h3>
      </div>
      <van-form @submit="login"
            ref="loginFormRef"
                @failed="failedSubmit"
      >
        <van-cell-group inset>
          <van-field
              v-model="loginForm.username"
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              :rules="rules.username"
              input-align="right"
              error-message-align="right"
          />
          <van-field
              v-model="loginForm.password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="rules.password"
              input-align="right"
              error-message-align="right"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit"
                      size="small"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </div>
<!--    <div class="admin"-->
<!--        @click="login('admin', '123456')"-->
<!--    >登录admin账号</div>-->
<!--    <div class="finance"-->
<!--         @click="login('finance', '123456')"-->
<!--    >登录财务账号</div>-->
  </div>
</template>

<script setup lang="ts" name="login">
import {reactive, ref, getCurrentInstance} from "vue";
import type {FieldRule, FormInstance} from "vant";

const {proxy} = getCurrentInstance() as any;
// 使用路由
import {useRouter, useRoute} from "vue-router";
const router = useRouter();
const route = useRoute();

// 获取重定向路径
function getRedirect() {
  let redirectURL: string | null = null;
  if(route.query.hasOwnProperty("redirect")) redirectURL = window.decodeURIComponent(route.query.redirect as string);
  return redirectURL;
}

// store  User
import {useUserStore} from "@/store/modules/user.ts";
const userStore = useUserStore();

const loginForm = reactive<{
  username: string,
  password: string
}>({
  username: '',
  password: ''
});
// 校验规则
const rules: {
  [index: string]: Array<FieldRule>
} = {
  username: [
    { required: true, message: '请输入用户名' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    {
      required: true,
      validator: value => value.length >= 6,
      message: '请输入6位以上密码'
    }
  ]
}

// form表单Dom
const loginFormRef = ref<FormInstance>();

async function login() {
  try {
    await userStore.login(loginForm.username, loginForm.password);
    await userStore.getInfo();
    const goPage = getRedirect();
    // 重置所有表单验证错误提示
    loginFormRef.value?.resetValidation();
    if(!goPage) router.replace('/main/index');
    else router.replace(goPage);
  } catch (e) {
    proxy.$message("登录失败");
  }
}
// 表单验证不通过
function failedSubmit() {
  proxy.$message("请填写正确的登录信息")
}
</script>

<style scoped lang="less">
.login{
  background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  //padding: 20px;
  .form{
    position: relative;
    left: 50%;
    top: 150px;
    transform: translateX(-50%);
    background: white;
    padding: 20px 0px 20px 0px;
    border-radius: 8px;
    width: 90%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .top{
      text-align: center;
      margin-bottom: 15px;
    }
  }
}
</style>